<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="checkAll">全选</button>
    <button id="unCheck">不选</button>
    <button id="opposite">反选</button>
    <br>
    <input type="checkbox" checked>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <script>
      
        var btn = document.getElementsByTagName('button')
        var inputs = document.getElementsByTagName('input')
        for(var i = 0;i < btn.length;i++){
            
            btn[i].onclick = function(){  
                for(var j = 0; j < inputs.length ; j++){
                    if(this.id === 'checkAll'){
                        inputs[j].checked =true
                    }else if (this.id === 'unCheck') {
                        inputs[j].checked = false
                    }else if (this.id === 'opposite') {
                        // 取反
                        inputs[j].checked = !inputs[j].checked
                    }
                }
            }
        }


    //   var btn = document.getElementsByTagName('button')
    //     function fun (n) {
    //         if(n === -1){
    //             return 0
    //         }
    //         console.log(btn[n].innerHTML)
    //         n--
    //         fun(n)
    //     }
    //     fun(btn.length-1);
       
    </script>
</body>
</html>